<!-- 登录页面 -->
<template>
  <div class="login_container">
    <div class="box">
      <p class="title">在线点餐系统</p>
      <input
        type="text"
        class="in"
        placeholder="用户名"
        v-model="userInfo.username"
      />
      <input
        type="password"
        class="in"
        placeholder="输入密码"
        v-model="userInfo.password"
        @keyup.enter="Login"
      />
    </div>
    <div class="login" @click="Login">
      <van-icon name="share" />
    </div>
    <div class="footer">
      <span>忘记密码</span> |
      <span><router-link to="/register">注册账号</router-link></span> |
      <span>手机号登录</span>
    </div>
  </div>
</template>

<script>
import { login } from "../../api/user";
import { Toast, Dialog } from "vant";
export default {
  name: "Login",
  data() {
    return {
      userInfo: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    async Login() {
      try {
        if (!this.userInfo.username || !this.userInfo.password)
          return Toast.fail("请输入账号密码");
        Toast.loading({
          message: "登录中...",
          forbidClick: true,
        });
        let { data } = await login(this.userInfo);
        console.log(data);

        if (data.status === 500) return Toast.fail(data.message);
        if (data.status === 200) Toast.success("登录成功");

        // 存储用户信息到本地
        this.userInfo.token = data.data;
        window.localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
        console.log(this.userInfo);
        this.$store.commit("SET_USERINFO", this.userInfo);
        this.$router.replace("/");
      } catch (err) {
        Toast.fail(err);
        console.log(err);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login_container {
  height: 100vh;

  .box {
    height: 50vh;
    padding: 12% 9% 0;
    box-sizing: border-box;

    display: flex;
    flex-flow: column;
    justify-content: space-around;
    .title {
      text-align: center;
      font-size: 19px;
      font-weight: 900;
      font-family: 仿宋;
    }
    .in {
      width: 100%;
      height: 60px;
      box-sizing: border-box;
      padding: 5px 30px;
      border-radius: 25px;
      background-color: rgb(242, 243, 247);
      border: 0;
      text-align: center;
      color: black;
      font-weight: 700;
    }
  }
  .login {
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    font-size: 25px;
    color: white;
    background-color: rgb(71, 146, 230);
    border-radius: 50%;

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 30px;
  }
  .footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    color: gray;
    span {
      color: black;
      font-size: 13px;
      font-weight: 550;
    }
  }
}
</style>